<template>
  <div class="header">
    <div class="title">结算管理</div>
    <div>
      <el-tabs v-model="modulekey">
        <el-tab-pane label="车款结算" :name="0"></el-tab-pane>
        <el-tab-pane label="退税结算" :name="1"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div class="bill-body">
    <component :is="moduleKeys[modulekey]" />
  </div>
</template>
<script setup>
import { ref, onMounted, markRaw } from "vue";
import cCarPaymentSettlement from "./CarPaymentSettlement/index.vue";
import cTaxRefundSettlement from "./TaxRefundSettlement/index.vue";
const modulekey = ref(0);
const moduleKeys = ref({
  0: markRaw(cCarPaymentSettlement),
  1: markRaw(cTaxRefundSettlement),
});
</script>
<style lang="less" scoped>
.header {
  width: calc(100% - 24px);
  background: #ffffff;
  padding-top: 24px;
  padding-left: 24px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #26282a;
    margin-bottom: 16px;
  }
}
.bill-body {
  margin: 16px 24px;
}
:deep(.el-tabs__header) {
  margin: 0 !important;
  box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
  .el-tabs__nav-wrap::after {
    position: static !important;
  }
  .el-tabs__item {
    color: #5e6163;
  }
  .el-tabs__item.is-active {
    color: var(--el-color-primary);
  }
}
</style>